<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-07-09 09:38:47
 * @LastEditors: william
 * @LastEditTime: 2025-07-09 09:40:10
-->
<template>
  <CustomModal
    title="菜谱烹饪"
    v-model="visible"
    isTabbar
    :showCancelButton="false"
    :showConfirmButton="false"
  >
    <view class="modal-content">
      <view class="container">
        <image
          :src="getViteImageUrl('recipe/loading.png')"
          mode="aspectFit"
          class="icon update-icon"
        />
        <view class="content-text">烹饪准备中......</view>
      </view>
    </view>
  </CustomModal>
</template>

<script setup>
defineOptions({
  name: 'PrepareRecipeTip',
  inheritAttrs: false
})

const visible = defineModel({
  type: Boolean,
  default: false
})

onMounted(_ => {
  //
})

const handlePlatDownload = _ => {
  console.log('handlePlatDownload')
}
</script>

<style lang="scss" scoped>
.modal-content {
  display: flex;
  flex-direction: column;
  margin: 82rpx 0 42rpx;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 0 26rpx;
  .icon {
    width: 86rpx;
    height: 86rpx;
    margin: 0 auto;
    &.update-icon {
      animation: spin 2s linear infinite;
    }
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .content-text {
    margin: 52rpx 0 0;
    line-height: 26rpx;
    text-align: center;
    font-size: 26rpx;
    font-weight: 400;
    color: var(--color-333);
  }
}
</style>
